<template>
	<view class="profile-container">
		<view class="header-section">
			<view class="header-title">个人资料</view>
			<view class="header-wave"></view>
		</view>
		
		<view class="form-section">
			<view class="form-item ripple-effect" @click="chooseAvatar">
				<text class="form-label">头像</text>
				<view class="form-content">
					<view class="avatar-wrapper">
						<image :src="getImageUrl(profileData.avatar) || '/static/default-avatar.jpg'" class="avatar" mode="aspectFill"></image>
						<view class="avatar-edit-icon">
							<view class="edit-icon-inner">+</view>
						</view>
					</view>
					<view class="arrow-right"></view>
				</view>
			</view>
			
			<view class="form-item ripple-effect" @click="editNickname">
				<text class="form-label">昵称</text>
				<view class="form-content">
					<text class="form-value">{{profileData.nickname || '未设置'}}</text>
					<view class="arrow-right"></view>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">手机号</text>
				<view class="form-content">
					<text class="form-value">{{formatPhone(profileData.phone) || '未绑定'}}</text>
					<button class="action-btn" v-if="!profileData.phone" @click="bindPhone">绑定</button>
					<button class="action-btn" v-else @click="changePhone">更换</button>
				</view>
			</view>
			
			<view class="form-item" v-if="!profileData.openid">
				<text class="form-label">微信账号</text>
				<view class="form-content">
					<text class="form-value">未绑定</text>
					<button class="action-btn wechat-btn" @click="bindWechat">
						<text class="btn-text">绑定</text>
					</button>
				</view>
			</view>
		</view>
		
		<button class="save-btn" type="primary" @click="saveProfile" :class="{'btn-active': isModified}">保存修改</button>
		
		<view class="tips-section">
			<view class="tip-item">
				<view class="tip-icon">i</view>
				<text class="tip-text">完善个人资料有助于获得更好的服务体验</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { updateUserProfile } from '@/api/user.js';
	import { uploadFile, getImageUrl } from '@/api/file.js';
	export default {
		data() {
			return {
				profileData: {
					id: '',
					avatar: '',
					nickname: '',
					phone: '',
					openid: ''
				},
				isModified: false
			}
		},
		onLoad() {
			this.loadUserInfo();
		},
		onShow() {
			// 重新加载用户信息，确保绑定/更换手机号后数据及时更新
			this.loadUserInfo();
		},
		methods: {
			// 加载用户信息
			getImageUrl,
			loadUserInfo() {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					console.log(userInfo);
					
					this.profileData = {
						id: userInfo.id,
						avatar: userInfo.avatar,
						nickname: userInfo.nickname,
						phone: userInfo.phone,
						openid: userInfo.openid
					};
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			},
			
			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return '';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			
			// 选择头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 显示上传中提示
						uni.showLoading({
							title: '上传中...'
						});
						
						uploadFile(res.tempFilePaths[0]).then(result => {
							console.log(result);
							
							// 上传成功后设置头像URL
								this.profileData.avatar = result.data.url;
							this.isModified = true;
								
								uni.hideLoading();
							}).catch(err => {
								console.error('上传头像失败', err);
								uni.hideLoading();
								uni.showToast({
									title: '上传头像失败',
									icon: 'none'
								});
							});
					}
				});
			},
			
			// 编辑昵称
			editNickname() {
				uni.showModal({
					title: '编辑昵称',
					editable: true,
					placeholderText: '请输入昵称',
					content: this.profileData.nickname,
					success: (res) => {
						if (res.confirm && res.content.trim()) {
							this.profileData.nickname = res.content.trim();
							this.isModified = true;
						}
					}
				});
			},
			
			// 绑定手机号
			bindPhone() {
				uni.navigateTo({
					url: `/pages/login/phone?mode=bind&userId=${this.profileData.id}`
				});
			},
			
			// 更换手机号
			changePhone() {
				uni.navigateTo({
					url: `/pages/login/phone?mode=change&userId=${this.profileData.id}`
				});
			},
			
			// 绑定微信号
			bindWechat() {
				if (!this.profileData.phone) {
					uni.showToast({
						title: '请先绑定手机号',
						icon: 'none'
					});
					return;
				}
				
				// 提示用户是否使用微信资料
				uni.showModal({
					title: '绑定微信',
					content: '是否使用微信头像和昵称更新您的个人资料？',
					confirmText: '使用',
					cancelText: '不使用',
					success: (res) => {
						// 根据用户选择设置forceUpdate标志
						const forceUpdate = res.confirm;
						// 跳转到微信登录页面并传递必要参数
				uni.navigateTo({
							url: `/pages/login/index?bind=1&phone=${this.profileData.phone}&forceUpdate=${forceUpdate}`
						});
					}
				});
			},
			
			// 保存个人资料
			async saveProfile() {
				if (!this.isModified) {
					uni.showToast({
						title: '未做任何修改',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '保存中...'
				});
				
				try {
					// 调用API保存
					const res = await updateUserProfile(this.profileData);
					
					if (res.code === 200) {
					// 更新本地存储
					const userInfo = uni.getStorageSync('userInfo');
					userInfo.avatar = this.profileData.avatar;
					userInfo.nickname = this.profileData.nickname;
					userInfo.phone = this.profileData.phone;
					uni.setStorageSync('userInfo', userInfo);
					
					uni.hideLoading();
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
					
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					} else {
						throw new Error(res.msg || '保存失败');
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					});
					console.error('保存失败', error);
				}
			}
		}
	}
</script>

<style lang="scss">
	.profile-container {
		min-height: 100vh;
		background-color: #f8f9fa;
		padding-bottom: 80rpx;
		
		.header-section {
			position: relative;
			height: 180rpx;
			background: linear-gradient(135deg, #4a6bdf, #644ae8);
			padding: 40rpx 30rpx 0;
			
			.header-title {
				color: #ffffff;
				font-size: 36rpx;
				font-weight: bold;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
			}
			
			.header-wave {
				position: absolute;
				bottom: -2rpx;
				left: 0;
				right: 0;
				height: 40rpx;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="%23f8f9fa" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path></svg>');
				background-size: cover;
				background-position: center bottom;
			}
		}
		
		.form-section {
			margin: -20rpx 30rpx 40rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
			overflow: hidden;
			position: relative;
			z-index: 1;
			
			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1px solid #f0f0f0;
				position: relative;
				
				&:last-child {
					border-bottom: none;
				}
				
				&.ripple-effect {
					overflow: hidden;
					
					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-color: rgba(0, 0, 0, 0.02);
						opacity: 0;
						transition: opacity 0.3s;
					}
					
					&:active::after {
						opacity: 1;
					}
				}
				
				.form-label {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
				
				.form-content {
					display: flex;
					align-items: center;
					
					.avatar-wrapper {
						position: relative;
						margin-right: 20rpx;
						
						.avatar {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							border: 3rpx solid rgba(255, 255, 255, 0.8);
							box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
						}
						
						.avatar-edit-icon {
							position: absolute;
							right: -6rpx;
							bottom: -6rpx;
							width: 36rpx;
							height: 36rpx;
							background: linear-gradient(135deg, #4a6bdf, #644ae8);
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
							
							.edit-icon-inner {
								color: #ffffff;
								font-size: 26rpx;
								font-weight: bold;
								line-height: 1;
							}
						}
					}
					
					.form-value {
						font-size: 32rpx;
						color: #666;
						margin-right: 20rpx;
					}
					
					.arrow-right {
						width: 16rpx;
						height: 16rpx;
						border-top: 3rpx solid #ccc;
						border-right: 3rpx solid #ccc;
						transform: rotate(45deg);
						transition: all 0.3s;
					}
					
					.action-btn {
						height: 64rpx;
						min-width: 140rpx;
						font-size: 28rpx;
						color: #4a6bdf;
						background: rgba(74, 107, 223, 0.1);
						border: 1px solid rgba(74, 107, 223, 0.3);
						border-radius: 32rpx;
						padding: 0 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						&.wechat-btn {
							background: rgba(10, 190, 6, 0.1);
							border: 1px solid rgba(10, 190, 6, 0.3);
							color: #0abe06;
						}
						
						&:active {
							opacity: 0.8;
						}
					}
				}
				
				&:active .arrow-right {
					transform: rotate(45deg) translateX(6rpx);
				}
			}
		}
		
		.save-btn {
			margin: 60rpx 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			background: linear-gradient(135deg, #4a6bdf, #644ae8);
			box-shadow: 0 8rpx 16rpx rgba(74, 107, 223, 0.3);
			transition: all 0.3s;
			
			&:active, &.btn-active {
				transform: translateY(3rpx);
				box-shadow: 0 4rpx 8rpx rgba(74, 107, 223, 0.3);
			}
		}
		
		.tips-section {
			padding: 0 30rpx;
			
			.tip-item {
				display: flex;
				align-items: flex-start;
				padding: 20rpx;
				
				.tip-icon {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					background-color: rgba(74, 107, 223, 0.1);
					color: #4a6bdf;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 16rpx;
					flex-shrink: 0;
					font-style: italic;
					font-weight: bold;
				}
				
				.tip-text {
					color: #999;
					font-size: 26rpx;
					line-height: 1.6;
				}
			}
		}
	}
</style> 